<template>
  <AfastDialog :close-on-click-modal="closeOnClickModal" class="afast-confirm-dialog" :radius="5" :show-close="showClose" ref="dialog">
    <template #default>
      <div class="title">{{ title }}</div>
      <div class="message">{{ message }}</div>
    </template>
    <template #footer>
      <div class="afast-confirm-dialog-buttons">
        <AfastButton :size="buttonSize" v-if="showCancel" class="button" @click.stop="close(false)" text="取消"></AfastButton>
        <AfastButton :size="buttonSize" v-if="showConfirm" class="button" type="primary" @click.stop="close(true)" text="确认"></AfastButton>
      </div>
    </template>
  </AfastDialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import AfastDialog from "../a/AfastDialog.vue";
import AfastButton from "../a/AfastButton.vue";
const title = ref("标题");
const message = ref("");
const dialog = ref();
const showClose = ref<boolean>(false)
const showCancel = ref<boolean>(false)
const showConfirm = ref<boolean>(false)
const closeOnClickModal = ref<boolean>()
const cancelText = ref<string>()
const confirmText = ref<string>()
const cancelTextColor = ref<Color>()
const confirmTextColor = ref<Color>() 
const buttonSize = ref()
const close = (success = false) => {
  dialog.value.close(success);
};
defineExpose({
  show(payload: ConfirmDialogPayload, listener: DialogListner) {
    if (payload) {
      if (payload.title) title.value = payload.title;
      if (payload.message) message.value = payload.message;
      showClose.value = payload.showClose === undefined || payload.showClose === true
      showCancel.value = payload.showCancel === undefined || payload.showCancel === true
      showConfirm.value = payload.showConfirm === undefined || payload.showConfirm === true
      buttonSize.value = payload.buttonSize
      closeOnClickModal.value = payload.closeOnClickModal === undefined || payload.closeOnClickModal === true
    }
    dialog.value.show(listener);
  },
  close,
});
</script>
<style lang="less">
.afast-confirm-dialog {
  .title{
    font-size: 18px;
  }
  .message{
    margin: 10px 0;
    font-size: 15px;
    color: gray
  }
  .afast-confirm-dialog-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px;

    .button:not(:first-child) {
      margin-left: 5px;
    }
  }
}
</style>
